<template>
  <footer class="footer-guide" >
    <el-row class="guide-items">
      <el-col
        :span="6"
        class="guide-item"
        :class="{ 'active': isCurrent('/Msite') }"
        @click="goTo('/Msite')"
      >
        <el-icon :size="22"><House /></el-icon>
        <span class="item-text">首页</span>
      </el-col>

      <el-col
        :span="6"
        class="guide-item"
        :class="{ 'active': isCurrent('/Search') }"
        @click="goTo('/Search')"
      >
        <el-icon :size="22"><Search /></el-icon>
        <span class="item-text">搜索</span>
      </el-col>

      <el-col
        :span="6"
        class="guide-item"
        :class="{ 'active': isCurrent('/Order') }"
        @click="goTo('/Order')"
      >
        <el-icon :size="22"><Tickets /></el-icon>
        <span class="item-text">订单</span>
      </el-col>

      <el-col
        :span="6"
        class="guide-item"
        :class="{ 'active': isCurrent('/Profile') }"
        @click="goTo('/Profile')"
      >
        <el-icon :size="22"><User /></el-icon>
        <span class="item-text">我的</span>
      </el-col>
    </el-row>
  </footer>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import {
  House,
  Search,
  Tickets,
  User
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()

// 添加路由守卫处理
const isCurrent = (path) => {
  return route.path === path
}

const goTo = (path) => {
  // 添加路由跳转保护
  if (!router) return
  router.push(path).catch(err => {
    // 忽略重复导航错误
    if (err.name !== 'NavigationDuplicated') {
      console.error('导航错误:', err)
    }
  })
}
</script>
<style scoped>
.footer-guide {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #fff;
  border-top: 1px solid #e4e4e4;
  z-index: 100;
}

.guide-items {
  height: 100%;
  display: flex;
  align-items: center;
}

.guide-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
  cursor: pointer;
  transition: all 0.3s;
}

.guide-item:hover {
  background-color: #f5f5f5;
}

.guide-item.active {
  color: #02a774;
}

.guide-item .el-icon {
  margin-bottom: 3px;
}

.item-text {
  font-size: 12px;
}
</style>